<template>
  <div class="content">
    <div class="top_bar">
      <div class="top-bar-left">
        <div style="display: inline-block">
          <van-icon name="arrow-left" @click="goback" class="bac" style="" />
        </div>

        <img :src="iconUrl + emailLogin[0].userImg" alt="" />
      </div>
      <div class="top-bar-center">
        <h4 class="title">我的消息</h4>
      </div>
      <div class="top-bar-right">
        <div class="secrch">
          <img src="../assets/icon/sele.png" alt="" />
        </div>

        <van-popover
          class="protop"
          v-model="showPopover"
          trigger="click"
          theme="dark"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <div class="add">
              <img
                style="display: inline-block"
                src="../assets/icon/add.png"
                alt=""
              />
            </div>
          </template>
        </van-popover>
      </div>
    </div>
    <div class="main">
      <div class="apply"></div>
      <div class="friends">
        <a href="#" @click.prevent="toCustomerServiceChat">
          <div class="friend-list">
            <div class="fri-list-l">
              <!-- <div class="tip" v-if="LogisticsTip != 0">{{ LogisticsTip }}</div> -->

              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/kefuxl_icon.png"
                alt=""
              />
            </div>
            <div class="fri-list-r">
              <div class="top">
                <div class="name">客服小乐</div>
                <div v-if="Logistics.Time != ''" class="time">
                  {{ changetime(Logistics.Time) }}
                </div>
                <div v-else class="time"></div>
              </div>
              <div class="bot-conten">
                <p>欢迎咨询</p>
                <!-- <p v-if="Logistics.title != ''">{{ Logistics.title }}</p>
                <p v-else></p> -->
                <!-- <p v-else>{{ requst }}</p> -->
              </div>
            </div>
          </div>
        </a>
        <a href="#" @click.prevent="toLogisticsPush">
          <div class="friend-list">
            <div class="fri-list-l">
              <div class="tip" v-if="LogisticsTip != 0">{{ LogisticsTip }}</div>

              <!-- <div :class="{ tip: LogisticsTip == 0 }" v-if="LogisticsTip != 0">
                {{ LogisticsTip }}
              </div> -->
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/wuiuchar.png"
                alt=""
              />
            </div>
            <div class="fri-list-r">
              <div class="top">
                <div class="name">交易物流</div>
                <div v-if="Logistics.Time != ''" class="time">
                  {{ changetime(Logistics.Time) }}
                </div>
                <div v-else class="time"></div>
              </div>
              <div class="bot-conten">
                <p v-if="Logistics.title != ''">{{ Logistics.title }}</p>
                <p v-else>暂无物流信息</p>
                <!-- <p v-else>{{ requst }}</p> -->
              </div>
            </div>
          </div>
        </a>
        <a href="#" @click.prevent="toSpecialActivities">
          <div class="friend-list">
            <div class="fri-list-l">
              <div class="tip" v-if="activeTip != 0">{{ activeTip }}</div>

              <!-- <div :class="{ tip: LogisticsTip == 0 }" v-if="LogisticsTip != 0">
                {{ LogisticsTip }}
              </div> -->
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/huodong_icon.png"
                alt=""
              />
            </div>
            <div class="fri-list-r">
              <div class="top">
                <div class="name">特惠活动</div>
                <div v-if="active.Time != ''" class="time">
                  {{ changetime(active.Time) }}
                </div>
                <div v-else class="time"></div>
              </div>
              <div class="bot-conten">
                <p v-if="active.title != ''">{{ active.title }}</p>
                <p v-else>暂无活动</p>
                <!-- <p v-else>{{ requst }}</p> -->
              </div>
            </div>
          </div>
        </a>
        <router-link :to="{ name: 'FriendsRequest' }">
          <div class="friend-list">
            <div class="fri-list-l">
              <div class="tip" v-if="tip != 0">{{ tip }}</div>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/addfrid_icon.png"
                alt=""
              />
            </div>
            <div class="fri-list-r">
              <div class="top">
                <div class="name">好友请求</div>
                <div class="time">12:00</div>
              </div>
              <div class="bot-conten">
                <p v-if="requst == ''">暂无好友请求</p>
                <p v-else>{{ requst }}</p>
              </div>
            </div>
          </div>
        </router-link>

        <div class="friend-list" v-for="item in friends" :key="item.listID">
          <div @click="toChatprv(item.id, item.user)">
            <div class="fri-list-l">
              <span class="tip" v-if="list_tip != 0">{{ list_tip }}</span>

              <img :src="iconUrl + item.userImage" alt="" />
            </div>
            <div class="fri-list-r">
              <div class="top">
                <div class="name">{{ item.user }}</div>
                <div class="time">{{ changetime(item.dateTime) }}</div>
              </div>
              <div class="bot-conten">{{ Decode(item.msg) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let Base64 = require("js-base64").Base64;

import datas from "../public/list.js";
import myfun from "../utils/timeDate.js";
import { mapState } from "vuex";
// const ws = new WebSocket("ws://localhost:8060");
const ws = new WebSocket("ws://106.55.48.147:8060");

export default {
  inject: ["reload"],
  data() {
    return {
      friends: [],
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "添加好友" },
        { text: "我的联系人" },
        { text: "主题设置" },
      ],
      requst: "",
      tip: 0,
      list_tip: 0,
      Logistics: {
        title: "",
        Time: "",
      },
      LogisticsTip: 0,
      active: {
        title: "",
        Time: "",
      },
      activeTip: 0,
    };
  },
  mounted() {
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
  },
  updated() {
    setTimeout(() => {
      this.getFriends();
    }, 1000);
  },
  created() {
    this.reload();
    this.getLogisticsInformation();
    this.getListofactivities();
    this.GetlatestMessage();
    this.GetmessageNum();
  },
  activated() {
    this.getLogisticsInformation();
    this.getListofactivities();
    this.tip = 0;
    this.requst = "";
    this.list_tip = "";
    this.LogisticsTip = 0;
    this.activeTip = 0;
    this.getFriends();
    this.GetmessageNum();
    this.GetlatestMessage();
  },
  destroyed() {},
  methods: {
    Decode(t) {
      return Base64.decode(t);
    },
    onSelect(action) {
      this.showPopover = false;
      if (action.text == "添加好友") {
        this.$router.push("/AddFriends");
      }
      if (action.text == "我的联系人") {
        this.$router.push("/ContactList");
      }
      if (action.text == "主题设置") {
        this.$router.push("/Themes");
      }
    },
    goback() {
      this.$router.push("/homePage");
    },
    async getLogisticsInformation() {
      const { data: res } = await this.$http.get("GetLogisticsInformation", {
        params: { id: this.emailLogin[0].userID },
      });
      try {
        this.Logistics.title = res.data[0].title;
        this.Logistics.Time = res.data[0].Time;
      } catch (error) {}
    },
    async getListofactivities() {
      const { data: res } = await this.$http.get("GetActivityPush");
      try {
        this.active.title = res.data[0].title;
        this.active.Time = res.data[0].time;
      } catch (error) {}
    },
    toChatprv(val, name) {
      this.$store.commit("setfriID", val);
      this.$store.commit("setchatName", name);
      this.$router.push("/chatNew");
    },
    changetime(t) {
      return myfun.dateTime1(t);
    },
    async GetlatestMessage() {
      try {
        const { data: res } = await this.$http.get("GetlatestMessage", {
          params: {
            id: this.emailLogin[0].userID,
            cid: this.emailLogin[0].userID,
          },
        });

        if (res.data[0].msgType === "3") {
          this.tip = res.count[0].count;
          this.requst = "来自" + res.data[0].user + "的好友请求";
        }
        if (res.data[0].msgType === "5") {
          this.tip = res.count[0].count;
          this.requst = res.data[0].msg;
        }
      } catch (error) {}
    },
    async getFriends() {
      try {
        const { data: res } = await this.$http.get("getFriendList", {
          params: { id: this.emailLogin[0].userID },
        });

        this.friends = res.data;
      } catch (error) {}
    },
    //获取消息数
    async GetmessageNum() {
      const { data: res } = await this.$http.get("GetInformationNum", {
        params: { id: this.emailLogin[0].userID },
      });

      this.LogisticsTip = res.data[0].tip == null ? 0 : res.data[0].tip;
      // console.log(res.data[0].tip);
    },
    async toLogisticsPush() {
      const { data: res } = await this.$http.post("ResetInformationNum", {
        tip: 0,
        id: this.emailLogin[0].userID,
      });
      this.LogisticsTip = 0;
      this.$router.push("/LogisticsPush");
    },
    toSpecialActivities() {
      this.$router.push("/SpecialActivities");
      this.activeTip = 0;
    },
    toCustomerServiceChat() {
      this.$store.commit("setfriID", 1);
      this.$router.push("/CustomerServiceChat");
    },
    getUid() {
      ws.send(JSON.stringify({ uid: this.emailLogin[0].userID }));
    },
    handleWsOpen(e) {
      console.log("连接成功：", e);
      this.getUid();
    },
    handleWsClose(e) {
      console.log("连接关闭：", e);
    },
    handleWsError(e) {
      console.log("连接错误：", e);
    },
    handleWsMessage(e) {
      let data = JSON.parse(e.data);
      // console.log(data);
      if (data.msgType === 3) {
        this.requst = "来自" + data.user + "的好友请求";
        this.tip++;
      }

      if (data.msgType === 4) {
        this.list_tip = 1;
        this.friends.push(data);
      }
      if (data.msgType === 5) {
        this.requst = "对方拒接了您的好友请求！";
        this.tip++;
      }
      if (data.msgType === 13) {
        this.Logistics.title = data.title;
        this.Logistics.Time = data.Time;
        this.LogisticsTip += 1;
      }
      if (data.msgType === 14) {
        this.active.title = data.title;
        this.active.Time = data.Time;
        this.activeTip += 1;
      }
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>
<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .top_bar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.125rem;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid #c8c7cc;

    .top-bar-left {
      float: left;
      padding-left: 1rem;
      img {
        margin-top: 0.625rem;
        width: 2.125rem;
        height: 2.125rem;
        border-radius: 8px;
      }
    }
    .top-bar-center {
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      .title {
        padding-top: 1rem;
      }
    }
    .top-bar-right {
      padding-right: 14px;
      position: absolute;
      right: 0;

      .secrch {
        width: 50px;
        height: 50px;
        display: inline-block;
      }
      .add {
        width: 45px;
        height: 45px;
        display: inline-block;
        margin-right: -18px;
      }
      img {
        padding: 15px 0 0 0;
        width: 1.625rem;
        height: 1.625rem;
      }
    }
  }
  .main {
    padding: 65px 1rem 0;
    .friends {
      width: 100%;
      position: absolute;
      left: 0;
      padding: 0px 16px 0;
      .friend-list {
        height: 4rem;
        .fri-list-l {
          position: relative;
          float: left;
          img {
            width: 3rem;
            height: 3rem;
            border-radius: 0.75rem;
          }
          .tip {
            position: absolute;
            z-index: 11;
            top: -6px;
            left: 25px;
            width: 20px;
            height: 20px;
            background: #ff5d5b;
            border-radius: 9px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: -0.41px;
            line-height: 20px;
            text-align: center;
          }
        }
        .fri-list-r {
          padding-left: 60px;
          .top {
            height: 25px;
            .name {
              float: left;
              font-size: 18px;
              color: #272832;
              letter-spacing: -0.62px;
            }
            .time {
              float: right;
              font-size: 14px;
              color: rgba(39, 40, 50, 0.4);
              letter-spacing: -0.41px;
              padding-right: 26px;
              line-height: 20px;
            }
          }
          .bot-conten {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: rgba(39, 40, 50, 0.6);
            letter-spacing: -0.48px;
            line-height: 25px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            width: 260px;
          }
        }
      }
    }
  }
}
.bac {
  top: -2px;
  margin-left: -12px;
  margin-right: 6px;
  z-index: 1200;
  font-size: 23px !important;
}
</style>